<template>
	<!-- <tn-popup v-model="show" :maskCloseable="maskCloseable" mode="top" length="60%" :borderRadius="borderRadius"> -->
		<view class="content">
			<view class="patient-head">
				<view class="list-icon-text">
					<view class="list__left">
						<view class="list__left__icon tn-icon-medical"></view>
						<view class="list__left__text">诊断信息</view>
						<!-- <tn-button @click="addPatient" class="dawn-btn-sm dawn-btn-sm__main">
								<text class="tn-icon-add-square-fill tn-padding-right-ss"></text>
								<text class="">新增</text>
							</tn-button> -->
					</view>
					<view class="list__right">
						<!-- <tn-button @click="closeBox()" class="dawn-btn-sm dawn-btn-sm__defult">
							<text class="tn-icon-close-fill">关闭</text>
						</tn-button> -->
						<tn-button @click="closeBox()" padding="20rpx 12rpx" backgroundColor="tn-bg-dawn-gray" size="sm" shadow>
							<text class="tn-icon-close-fill tn-padding-right-ss"></text>
							<text class="tn-text-ellipsis">关闭</text>
						</tn-button>
					</view>
				</view>

				<!-- <view class="tn-flex tn-flex-row-center tn-margin-top-sm tn-width-full"> -->
				<!-- <view class="list__left">
							<view class="">关键字</view>
						</view> -->
				<!-- <view class="list__right list-icon-text__right" style="width: 80%;">
							<tn-input type="text" :border="true" :showRightIcon="true" rightIcon="search" />
						</view> -->

				<!-- </view> -->
				<view class="tn-flex dawn-search">
					<view class="tn-icon-search tn-padding-sm"></view>
					<input class="dawn-search__input" :placeholder="searchPlaceholder" maxlength="255" confirm-type="search" @input="searchInput"
						@confirm="getPage">
				</view>
			</view>

			<!-- <scroll-view scroll-y="true"> -->
			<view style="padding-top: 95px;padding-bottom: 30px">
				<view class="tn-flex tn-flex-row-center">
					<tn-loading mode="flower" :show="loading" :size="50" color="#3571BB"></tn-loading>
				</view>
				<block v-for="(item,index) in items" :key="index">
					<!-- <tn-list-cell> -->
					
						<view class="list-text" @click="chooseItem(item)">
							<view class="">
								<view><text>{{ item.value }}</text></view>
								<view class=""><text class="dawn-text-sm">{{ item.label }}</text></view>
								<!-- <view class="">
									<text class="tn-text-bold">{{ item.diagCode }}</text>
									<text class="tn-color-gray tn-padding-left-ss tn-padding-right-ss">|</text>
									<text class="dawn-text-sm">{{ item.diagName || '' }}</text>
								</view> -->

								<!-- <view class="tn-margin-left-sm tn-text-df">
										<text
											class="tn-icon-image-text-fill tn-margin-right-ss">{{ item.patientId }}</text>
									</view> -->
							</view>
							<view class="list__right">
								<!-- <text class="dawn-text-sm tn-text-right">{{ item.diagName || '' }}</text> -->
								<!-- <tn-button class="dawn-btn-op"> -->
								<!-- <text  class="tn-icon-success-square-fill dawn-color tn-text-lg"></text> -->
								<text class="tn-icon-right tn-color-gray"></text>

								<!-- </tn-button> -->
							</view>
						</view>
					<!-- </tn-list-cell> -->
				</block>
			</view>
			<!-- </scroll-view> -->

			<!-- <dawn-pagination ref="pagination" :current="queryData.pageNo" :total="total"
				@pagination="getPage" /> -->
		</view>
	<!-- </tn-popup> -->


</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import * as api from '@/api/api.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		name: 'patient_box',
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		props: {
			borderRadius: {
				type: [Number, String],
				default: 40
			},
			// 距离右边的距离
			right: {
				type: [Number, String],
				default: 30
			},
			zIndex: {
				type: [Number, String],
				default: 3000
			},
			// 类型
			type: {
				type: String,
				default: ''
			},
			items: {
				type: Array,
				default: function() {
					return [];
				}
			},
			selected: {
				type: Array,
				default: function() {
					return [];
				}
			},
			// 是否查询
			search: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				heightInput: 80,
				maskCloseable: false,
				searchPlaceholder: '关键字搜索 编码/名称',
				loading: false,
				show: false,
				total: 0,
				list: [],
				queryData: {
					pageSize: 10,
					pageNo: 1,
					keywords1: ''
				},
			}
		},
		mounted() {
			console.info("patient-box mounted");
			this.show = true;
		},
		methods: {
			//搜索输入监听
			searchInput(e) {
				console.log(e.detail.value);
				this.queryData.keywords1 = e.detail.value;
			},
			closeBox() {
				this.show = true;
				this.$emit('closeDiag');
			},
			chooseItem(item) {
				let array = new Array();
				let o = new Object();
				o.diagnoseCode = item.diagCode;
				o.diagnoseName = item.diagName;
				console.info(this.type)
				if (this.type === 'mainDiagnose') {
					o.diagnoseType = '1';
				} else if (this.type === 'othDiagnose') {
					o.diagnoseType = '0';
				}
				array.push(o);
				this.show = false;
				this.$emit('selDiag', array);
			},
			getCode(item) {
				this.showCode = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-popup__close--top-right {
		color: #FFFFFF !important;
	}

	.patient-box {
		padding: 10px;
		border-radius: $dawn-btn-radius;
		position: relative;
		z-index: 1;
		background-color: #fff !important;
		color: #000;
	}

	.patient-head {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10000;
		background-color: white;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		// padding: 10rpx 0rpx;
		padding: 5px;
	}

	.qrcode {
		width: 300rpx;
		height: 300rpx;
		border-radius: $dawn-border-radius;
	}


	::v-deep .tn-list-cell {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #080808;
		font-size: $dawn-font-size-base;
		padding: 10rpx 15rpx !important;
	}

	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		border-bottom: 1px solid $dawn-line-color;
	}
	
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 30rpx;
		border-bottom: 1px solid $dawn-line-color;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	.list {
		font-size: $dawn-font-size-base;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 5rpx;
				font-size: $dawn-font-size-lg + 2;
				font-weight: bolder;
				color: $dawn-theme-color-dark;
			}

			&__text {
				font-size: $dawn-font-size-md;
				color: $dawn-theme-color-dark;
				font-weight: bolder;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.dawn-search {
		z-index: 5;
		align-items: center;
		border-radius: 19px;
		background: #f8f8f8;
		width: calc(100% - 60rpx);
		margin: 0 auto;
		position: relative;
		top: 5px;
		margin-bottom: 5px;

		&__input {
			width: calc(100% - 90rpx);
		}
	}
</style>